<template>
	<div
		class="message_box"
		v-if="(FieldItem?.content && FieldItem?.content.length) || (FieldItem?.attrs.messageList && FieldItem?.attrs.messageList.length)"
	>
		<template v-if="FieldItem?.attrs.messageList && FieldItem?.attrs.messageList.length">
			<div v-for="(message, index) in FieldItem?.attrs.messageList" :key="index" style="width: 100%">
				<router-link :to="message.url" style="width: 100%; text-decoration: none">
					<div
						class="message_list"
						:style="{
							paddingLeft: FieldItem?.attrs.titleIcon.paddingLeft + 'px',
						}"
					>
						<div class="left" style="display: flex; align-items: center">
							<el-image
								:src="formatSrc(message.icon)"
								:style="{
									width: FieldItem?.attrs.titleIcon.width + 'px',
									height: FieldItem?.attrs.titleIcon.height + 'px',
								}"
							></el-image>
							<span
								:style="{
									fontSize: FieldItem?.attrs.titleConfig.size + 'px',
									marginLeft: FieldItem?.attrs.titleConfig.marginLeft + 'px',
									color: FieldItem?.attrs.titleConfig.color,
								}"
							>
								{{ message.title }}
							</span>
						</div>
						<el-icon :style="{ marginRight: FieldItem?.attrs.moreContent.marginRight + 'px' }"><ArrowRight /></el-icon>
					</div>
				</router-link>
			</div>
		</template>
		<!-- 动态数据 -->
		<template v-else>
			<div
				v-for="message in FieldItem?.content"
				:key="message.PersonalNoticeID"
				class="message_list"
				:style="{
					paddingLeft: FieldItem?.attrs.titleIcon.marginLeft + 'px',
				}"
			>
				<div class="left" style="display: flex; align-items: center">
					<el-image
						:src="formatSrc(FieldItem?.attrs['left-icon'])"
						:style="{
							width: FieldItem?.attrs.titleIcon.width + 'px',
							height: FieldItem?.attrs.titleIcon.height + 'px',
						}"
					></el-image>
					<span
						:style="{
							fontSize: FieldItem?.attrs.titleConfig.size + 'px',
							marginLeft: FieldItem?.attrs.titleConfig.marginLeft + 'px',
							color: FieldItem?.attrs.titleConfig.color,
						}"
					>
						{{ message.Title }}
					</span>
				</div>
				<el-icon :style="{ marginRight: FieldItem?.attrs.moreContent.marginRight + 'px' }"><ArrowRight /></el-icon>
			</div>
		</template>
		<!-- <uni-popup ref="popup" background-color="#fff">
			<view
				class="popup-content"
				:class="{
					'popup-height': message.type === 'left' || message.type === 'right',
				}"
			>
				<text>{{ message.value.Title }}</text>
				<view>{{ message.value.Content }}</view>
				<text>{{ message.value.Time }}</text>
			</view>
		</uni-popup> -->
	</div>
	<div v-else style="width: 100%; height: 100%">
		<el-image :src="notImage" fit="contain"></el-image>
	</div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import Lxy_page_event_remote from '/@/components/Linxyun/custom/CustomCommon/lxy_page_event_remote.js';
import { formatSrc } from '/@/utils/extendMethods';
const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData, inputData, globalData } = toRefs(props);
const notImage = new URL('../../../../assets/image/no_data.png', import.meta.url).href;
let { proxy } = <any>getCurrentInstance();

onBeforeMount(async () => {
	await init();
});

const init = async () => {
	if (FieldItem.value?.dynamicOptions.url) {
		const remoteEvent = new Lxy_page_event_remote(FieldItem.value?.dynamicOptions);
		remoteEvent.setDataSrc(pageData!.value, props.inputData, globalData?.value);
		const result = await remoteEvent.callEvent();
		if (result.success && result.Records && result.Records.length) {
			FieldItem.value!.content = result.Records.map((m: Record<string, any>) => {
				return { Title: m[FieldItem.value!.attrs.titleContent] };
			});
			proxy!.$forceUpdate();
		}
	}
};

// const handlerMessage = (item, type) => {
// this.message.value = item
// this.message.type = type
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
// this.$refs.popup[0].open(type)
// console.log(this.$refs.popup[0])
// };
</script>

<style lang="scss" scoped>
.message_box {
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0px 8px 16px 0px rgba(5, 79, 184, 0.1);
	margin: 0 15px px;
	width: 100%;
	.message_list {
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid #f0f1f5;
		box-sizing: border-box;
		width: 100%;
		align-items: center;
	}
}
</style>
